<!-- 数据爬取管理 -->
{% extends 'layouts/default.html' %}
{% set title = '客户阶段' %}
{% set menuActive = 'system' %}
{% block container %}
<div class="row">
    <div class="col-lg-2">
        <nav class="side-menu">
            <div class="side-menu-label d-flex align-items-center">系统</div>
            <ul class="side-menu-list">
                <li><a href="/system/users">用户</a></li>
                <li><a href="/system/products">产品</a></li>
            </ul>
            <div class="side-menu-label d-flex align-items-center">客户</div>
            <ul class="side-menu-list mb-3">
                <li><a href="/system/link-types">联系类别</a></li>
                <li><a class="active">客户阶段</a></li>
                <li><a href="/system/tags">客户标签</a></li>
                <li><a href="/system/dataset">数据收集</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-lg-10">
        <div class="h4 mb-4">系统 - 客户阶段</div>
        <div class="d-flex align-items-center justify-content-between flex-wrap">
            <div class="d-flex align-items-center my-1">
                <div><input class="form-control" type="search" id="searchName" placeholder="名称" /></div>
                <div class="ms-1"><button id="searchBtn" class="btn btn-dark" onclick="app.search()">搜索</button></div>
            </div>
            <div class="d-flex align-items-center my-1">
                <div class="d-flex align-items-center flex-wrap">
                    <button id="toolbarNew"
                        class="btn btn-dark btn-action d-flex justify-content-center align-items-center"
                        onclick="app.new()" data-toggle="tooltip" title="新增阶段">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                            class="bi bi-plus-lg" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
                        </svg>
                    </button>
                </div>
                <div class="ms-3 d-flex align-items-center flex-wrap">
                    <button id="toolbarRefresh" onclick="app.search()" data-toggle="tooltip" title="刷新"
                        class="btn btn-dark btn-action ms-1 d-flex justify-content-center align-items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-clockwise"
                            width="24" height="24" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path
                                d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column mt-3">
            <div id="spinner" class="text-center" style="display: none;">
                <div class="spinner-border" role="status"></div>
            </div>
            <div id="table" class="table-responsive"></div>
        </div>
    </div>
</div>
{% endblock container %}
{% block script %}
<script src="/public/js/stages.js"></script>
<script>
    const app = {
        data: {
        },
        search() {
            $('#searchBtn').attr('disabled', true);
            $('#spinner').show();
            const data = { name: $('#searchName').val() };
            $.ajax({
                type: 'get',
                url: '/system/stages/search',
                data,
            }).done(function (result) {
                app.data.tableData = result.data;
                app.renderTable();
            }).always(function () {
                $('#searchBtn').attr('disabled', false);
                $('#spinner').hide();
            });
        },
        renderTable() {
            // clear dom
            const table = document.getElementById('table');
            while (table.firstChild) table.removeChild(table.firstChild);

            // render
            let rows = '';
            for (let i = 0; i < this.data.tableData.length; i++) {
                const item = this.data.tableData[i];
                rows += `
                    <tr id="row-${item.id}">
                        <th scope="row">${item.id}</th>
                        <td>${item.name}</td>
                        <td><label class="color-cube" style="background-color:${item.colorHex || ''};"></label></td>
                        <td>${item.sequence}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <button type="button" class="btn btn-sm btn-dark" onclick="app.edit(${i})">编辑</button>
                                ${item.deletable ? `<button type="button" class="btn btn-sm btn-danger ms-1" onclick="app.delete(${item.id})">删除</button>` : ''}
                            </div>
                        </td>
                    </tr>
                `;
            }
            const tableHTML = `
                <table class="table table-bordered table-group-divider table-light">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">名称</th>
                            <th scope="col">颜色</th>
                            <th scope="col">顺序</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rows}
                    </tbody>
                </table>
            `;
            table.innerHTML = tableHTML;
        },
        new() {
            stageEditor.open({
                title: '新建',
                onDone: () => helper.toast('操作成功', 'success'),
                onAlways: () => app.search()
            });
        },
        edit(idx) {
            const item = this.data.tableData[idx];
            stageEditor.open({
                title: '编辑',
                data: item,
                onDone: () => helper.toast('操作成功', 'success'),
                onAlways: () => app.search()
            });
        },
        delete(id) {
            helper.confirm('是否删除这一阶段，这是一个不可逆操作！', function () {
                $.ajax({
                    url: `/system/stages/${id}`,
                    type: 'delete',
                }).done(function () {
                    helper.toast('操作成功', 'success');
                    app.search();
                }).fail(function (result) {
                    switch (result.status) {
                        case 400: {
                            helper.toast(result.responseJSON?.message || '未知错误，请刷新重试', 'warning');
                            break;
                        }
                        default: {
                            helper.toast('操作失败，请刷新重试，或者联系管理员。', 'danger');
                        }
                    }
                });
            });
        }
    };

    $(async function () {
        app.search();
    });
</script>
{% endblock script %}